<template>
  <div>
    <van-nav-bar
      title="个人信息"
    >
      <template #left>
        <van-icon
          @click="onClickLeft"
          name="arrow-left"
          color="#999"
        />
        <slot name="title" />
      </template>
    </van-nav-bar>
    <van-cell
      is-link
      @click="showPopup1"
    >
      <div class="photo-wrapper">
        <div>头像</div>
        <div class="avatar"><img :src="userProfile.photo"></div>
      </div>
    </van-cell>
    <van-popup
      v-model="photoShow"
      position="bottom"
      :style="{ height: '30%', width: '100%' }"
    />
    <van-cell
      is-link
      @click="showPopup2"
    >
      <div class="photo-wrapper">
        <div>昵称</div>
        {{ userProfile.name }}
      </div>
    </van-cell>
    <van-popup
      v-model="nameShow"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"

      position="right"
      :style="{ height: '100%', width: '100%' }"
    />
    <van-cell
      is-link
      @click="showPopup3"
    >
      <div class="photo-wrapper">
        <div>简介</div>
      </div>
    </van-cell>
    <van-popup
      v-model="introducesshow"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"

      position="right"
      :style="{ height: '100%', width: '100%' }"
    />
    <van-cell
      is-link
      @click="showPopup4"
    >
      <div class="photo-wrapper">
        <div>性别</div>
        {{ userProfile.gender === 1 ? '男' : '女' }}
      </div>
    </van-cell>
    <van-popup
      v-model="sexShow"
      position="bottom"
      :style="{ height: '30%', width: '100%' }"
    />
    <van-cell
      is-link
      @click="showPopup5"
    >
      <div class="photo-wrapper">
        <div>生日</div>
        {{ userProfile.birthday }}
      </div>
    </van-cell>
    <van-popup
      v-model="birthdayShow"
      position="bottom"
      :style="{ height: '30%', width: '100%' }"
    />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'UserMassage',
  data() {
    return {
      photoShow: false,
      nameShow: false,
      introducesshow: false,
      sexShow: false,
      birthdayShow: false,
    };
  },
  computed: {
    ...mapState('user', [
      'userProfile',
    ]),
  },
  methods: {
    ...mapActions('user', [
      'updateUserProfile',
    ]),
    onClickLeft() {
      this.$router.go(-1);
    },
    showPopup1() {
      this.photoShow = true;
    },
    showPopup2() {
      this.nameShow = true;
    },
    showPopup3() {
      this.introducesshow = true;
    },
    showPopup4() {
      this.sexShow = true;
    },
    showPopup5() {
      this.birthdayShow = true;
    },
  },
  created() {
    this.updateUserProfile();
  }
}
</script>

<style lang="less" scoped>
@import url('@/assets/style/common.less');

.avatar {
  .avatar(10px);
}

.photo-wrapper {
  display: flex;
  justify-content: space-between;
}
</style>
